<template>
    <div>
        <h2>用户登录 - {{ store.state.userName }}</h2>
        <button @click="login">模拟登录</button>
        <button @click="logout">模拟退出</button>
        <router-link to="/login/user">已登录个人中心</router-link>
        <router-link to="/login/nouser">未登录个人中心</router-link>
    </div>
    <router-view></router-view>

    <Model></Model>
</template>

<script setup>
import { useRoute, onBeforeRouteLeave, onBeforeRouteUpdate, useRouter } from 'vue-router';
import { useStore } from 'vuex';
import HomeView from './HomeView.vue'
import Model from '../components/Model.vue'
const store = useStore()

const login = () => {
    store.dispatch('login', "嘿嘿哈哈呵呵")
}
const logout = () => {
    store.dispatch('logout')
}

onBeforeRouteLeave((to, from, next) => {
    console.log(to, from);
    next();
})

// route 获取参数和之前是一模一样的，但是，要注意 route 是一个响应式数据对象接收
const route = useRoute();
// console.log(route.query.name, route.query.age);
console.log(route.params.name);


</script>

<style lang="scss" scoped></style>